<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移入改变大小</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">

</div>
</body>
</html>
<script type="text/babel">
    let app=document.getElementById('app');
    class Child extends React.Component{
        constructor(props) {
            super(props);
            this.state={
                size:"200px"
            }
        }
        render() {
            return <div>
                <img onMouseOver={this.Overclick.bind(this)} onMouseOut={this.Outclick.bind(this)} style={{width:this.state.size}} src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1832065145,3723585217&fm=26&gp=0.jpg" alt=""/>
            </div>
        }
    //    函数
        Overclick(){
            this.setState({size:"600px"})
        }
        Outclick(){
            this.setState({size:"200px"})
        }
    }
    ReactDOM.render(<Child/>,app)
</script>